<template>
  <div class="project-details">
    <div class="project-content">
      <div style="text-align: center; font-size: 24px; font-weight: bold;">
        <span>{{ form.noticeTitle }}</span>
      </div>
      <div style="text-align: right; font-size: 15px; color: rgb(102, 102, 102);">
        <label>浏览量 ：666</label>
      </div>
      <el-divider></el-divider>
      <div class="description-container">
        <div v-html="form.noticeContent" class="rich-text-content"></div>
      </div>

      <div style="text-align: right; font-size: 15px; color: rgb(102, 102, 102);">
        <label>{{ form.createTime }}</label>
      </div>
      <el-divider></el-divider>
      <div style="color: rgb(102,102,102); font-size: 15px; margin-left: 15px ">
        <label @click="fetchPreviousDemand" style="display: block;margin-bottom: 10px; cursor: pointer;">上一个</label>
        <label v-if="nextDemandId !== null" @click="fetchNextDemand"
               style="display: block; cursor: pointer;">下一个</label>
      </div>

    </div>
  </div>
</template>


<script>
import 'quill/dist/quill.core.css';  // 导入富文本编辑器样式
import {listDemand, getDemand, delDemand, addDemand, updateDemand} from "@/api/project/demand";
import dict from "../utils/dict";
import demandList from "./demandList.vue";
import {getNotice, selectNoticeListNew} from "@/api/system/notice";

export default {
  name: 'ProjectDetails',
  data() {
    return {
      editorOption: {
        // 富文本编辑器配置项，根据需要配置
        placeholder: '输入内容...',
        theme: 'snow'  // 主题样式，snow 为默认样式
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 需求表格数据
      noticeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      detailOpen: false,
      seeCheckOpen: false,
      seeClaimNeedDetailOpen: false,
      claimNeedDetailForm: {},

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        type: 2,
        line: null,
        prize: null,
        awardTime: null,
        userId: null,
        otherPrize: null,
        state: null,
        needNum: null,
        // isShow: 1
      },
      demandId: null,
      demandIds: [],
      // 表单参数
      form: {},
    };
  }, computed: {
    maxDemandId() {
      if (!this.noticeList.length) return null; // 处理空数组情况
      // 使用 reduce 方法获取最大的 demandId
      return this.noticeList.reduce((max, demand) => {
        return demand.id > max ? demand.id : max;
      }, -Infinity);

    },

    previousDemandId() {
      return this.demandId > 0 ? this.demandId - 1 : null;
    },
    nextDemandId() {
      return this.demandId + 1;
    }
  },
  created() {
    this.noticeId = this.$route.query.id;
    this.handleUpdate(this.$route.query.id);
    this.getList();
  },
  methods: {
    // 方法获取
    fetchPreviousDemand() {
      if (this.previousDemandId) {
        this.handleUpdate(this.previousDemandId);
        this.demandId--;
      }
    },
    fetchNextDemand() {
      if (this.nextDemandId !== null) {
        this.handleUpdate(this.nextDemandId);
        this.demandId++;
      } else {
        this.handleUpdate(this.demandId);
        console.log(`已经是最后一个`);
      }
    },

    /** 查询需求列表 */
    getList() {
      this.loading = true;
      selectNoticeListNew(this.queryParams).then(response => {
        this.noticeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {

      this.form = {
        id: null,
        noticeTitle: null,
        noticeContent: null,
        createTime: null
      };
      this.resetForm("form");
    },
    handleUpdate(id) {
      this.reset();
      getNotice(id).then(response => {
        this.form = response.data;
      });
    },
  }
};
</script>

<style scoped>
.project-details {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.project-content {
  max-width: 80%; /* 控制内容的最大宽度 */
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9); /* 添加背景颜色，透明度根据需求调整 */
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.description-container {
  width: 80%; /* 边框容器占据父容器的80% */
  margin: 0 auto; /* 自动居中 */
  /*border: 1px solid #ccc;*/
  padding: 10px; /* 可选：添加内边距以增强内容与边框之间的间距 */
}

.rich-text-content {
  width: 100%; /* 内容占据父容器的100% */
  font-size: 20px;

}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
  text-align: center; /* 居中标题文本 */
  line-height: 1.5;
}

h2 {
  font-size: 18px;
  margin-left: 90px;
  margin-right: 40px;
  line-height: 1.7;
}

h3 {
  margin-top: 30px;
  text-align: right;
  color: rgb(102, 102, 102);
}


p {
  font-size: 23px;
  line-height: 1.6;
  margin-bottom: 15px;
  margin-left: 50px;
  margin-top: 20px;
}

strong {
  font-weight: bold;
}
</style>
